<template>
    <div style="background: #f5f5f5;">
      <div style="width:100vw;height:auto;background: #fff;">
        <div class="body" v-for="v in evaluate"  style="background: #fff;">
          <img src="../../assets/img/icon.png" alt="" class="icon">
          <p style="margin-left: 3vw;line-height: 8vw;">{{v.user_name}}</p>
          <p style="float: right;line-height: 8vw;">
            <span v-if="evalCode === 0">好评</span>
            <span v-if="evalCode === 1">中评</span>
            <span v-if="evalCode === 2">差评</span>
          </p>
          <div class="clear"></div>
          <p class="contents">{{v.contents}}</p>
          <div class="reply" v-if="v.replyType === 1">
            <p class="person">{{v.replyId}}：<span>{{v.replyContent}}</span></p>
          </div>
          <div class="reply" v-if="v.replyType === 2">
            <div class="replyImg">
              <img :src="v.replyImg" alt="" style="margin-left: 2vw;">
            </div>
          </div>
          <p class="time">{{v.time}} <span class="sizeColor">颜色尺码：{{v.sizeColor}}</span></p>
          <div class="clear"></div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "evaluate",
      props:["evalCode","evaluate"]
    }
</script>

<style scoped lang="scss">
  .body{
    width:92%;
    background: #fff;
    margin: 10px auto;
    .time{
      font-size: 11px;
      color: #999999;
      margin:3vw 0;
    }
    .reply{
      width:100%;
      height:auto;
      .replyImg{
        width:100%;
        height:32vw;
        margin-top: 12vw;

        background: #f5f5f5;
        img{
          width:28vw;
          height: 28vw;
          margin: 2vw 1vw ;
          display: inline-block;
          justify-content: space-around;
          background: #ffecec;
        }
      }
        .person{
          font-size: 13px;
          color: #333;
          background: #f5f5f5;
          padding:2vw 0 2vw 1.5vw;
        }

    }
    img{
      float: left;
    }
    p{
      float: left;
    }
    .contents{
      margin-top: 2vw;
      color: #333;
      font-size: 13px;
      line-height: 5vw;
    }
  }
.icon{
  width:8vw;
  height: 8vw;
  display: inline-block;

}
</style>
